<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row>
          <el-button type="info" plain size="small" @click="handNew">新建目录</el-button>
          <el-button type="info" plain size="small" @click="handleSubject">返回学科</el-button>
        </el-row>
        <el-form label-width="80px" :model="formInline" :inline="true" style="margin-top: 10px;">
          <el-form-item label="目录名称" style="width: 298px" >
            <el-input placeholder="请输入" v-model="formInline.nameList"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择" v-model="formInline.region"> 
              <el-option value="启用"></el-option>
              <el-option value="禁用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="Empty">清除</el-button>
            <el-button type="primary" @click="findList">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="articles" border style="width: 100%">
          <el-table-column prop="id" label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称"></el-table-column>
          <el-table-column prop="creator" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期"></el-table-column>
          <el-table-column prop="totals" label="面试题数量"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state===0">屏蔽</el-tag>
              <el-tag v-if="scope.row.state===1">启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="updateList(scope.row)"
                :disabled="!!scope.row.state"
              >修改</el-button>
              <el-button
                type="text"
                size="small"
                @click="choeseList(scope.row)"
              >{{ scope.row.state?'启用':'禁用' }}</el-button>
              <el-button
                type="text"
                size="small"
                @click="delList(scope.row)"
                :disabled="!!scope.row.state"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="changePager"
          :total="counts"
          :current-page="formInline.page"
          :page-size="formInline.pagesize"
          hide-on-single-page
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import {list, update, add, remove, removeState} from '../../api/hmmm/directorys'
  import {parseTime} from '../../filters/index'

  export default {
    // name: 'DirectorysList',
    data() {
      return {
        region: '',
        dialogVisible: false,
        articles: [],
        counts: 0,
        // page: null,
        // pagesize: 10,
        formInline: {
          nameList: '',
          region: '',
          page: null,
          pagesize: 10
        }
      }
    },
    created() {
      this.getArticles()
    },
    methods: {
      // 返回学科
      handleSubject() {
        this.$router.push('list')
      },
      // 新建目录
      handNew() {
        this.$prompt('请输入目录名称', '提示', {
          title: '新建目录',
          inputPlaceholder: '请输入',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          const addList = {
            subjectID: 78,
            directoryName: value
          }
          add(addList)
          this.getArticles()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消新建'
          })
        })
      },
      // 获取列表数据
      async getArticles() {
        const data = await list(this.formInline)
        data.data.items.reverse()
        this.articles = data.data.items
        this.counts = data.data.counts
      },
      // 改变当前页
      changePager(newPage) {
        this.formInline.page = newPage
        this.getArticles()
      },
      // 修改目录
      updateList(item) {
        this.$prompt('请输入修改名称', {
          title: '修改目录',
          inputPlaceholder: item.directoryName,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          const updateDate = {
            id: item.id,
            subjectID: item.creatorID,
            directoryName: value
          }
          update(updateDate)
          this.getArticles()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          })
        })
      },
      // 删除目录
      delList(item) {
        this.$confirm('是否删除')
          .then(() => {
            remove({id: item.id})
              .then(res => {
                this.articles.splice(item, 1)
                this.getArticles()
              })
              .catch(res => {
                this.$message.error('删除失败!')
              })
          }).catch(() => {
          this.$message.info('已取消删除')
        })
      },
      // 选择状态
      choeseList(item) {
        const status = {
          id: item.id,
          state: item.state
        }
        if (status.state) {
          status.state = 0
          item.state = status.state
        } else {
          status.state = 1
          item.state = status.state
        }
        removeState(status)
          .then(result => {
            this.$message({
              type: 'success',
              message: '状态修改成功'
            })
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '状态修改失败'
          })
        })
      },
      // 查询
      findList() {
        let nameList = this.formInline.nameList
        let region = this.formInline.region
        if (nameList.length === 0 && region.length === 0) {
          this.$message({
            type: 'danger',
            message: '请填写目录名称或选择状态'
          })
        } else {
          if (region === '启用') {
            region = 1
          } else {
            region = 0
          }
          const cha = {
            directoryName: nameList,
            state: region
          }
          list(cha).then(res => {
            this.articles = res.data.items
            this.counts = res.data.counts
            for (var item of res.data.items) {
              item.addDate = parseTime(item.addDate)
            }
          })
        }
      },
      Empty() {
        this.formInline.nameList = ''
        this.formInline.region = ''
      }
    }
  }
</script>

<style scoped>
</style>
